*{
  margin: 0;
  padding: 0;
  }
html,body{
  height: 100%;
  width: 100%;
  /* min-width: 70%;
  min-height: 720px; */
  background-color: white;
 
}
#title{
    position:absolute;
    width: 52%;
    height: 11%;
    top:1%;
    left: 24%;
    background: #b85454;
    font-size: 8vmin;
    font-weight: bold;
    text-align: center;
    letter-spacing: 5px;
  }
  #timer{
    position:absolute;
    width: 52%;
    height: 4%;
    top:12%;
    left: 24%;
    background: #dea5ec;
    font-size: 1.5vmin;
    text-align: right;
  }
  #center1{
    position:absolute;
    width: 52%;
    height: 13%;
    top:16%;
    left: 24%;
   
    background: #ac54b8;
  }
  .key11{
        color: white;
        padding-top: 0.5%;
        width:20%;
        height: 35%;
        left:10%;
        text-align:center;
        font-size: 2.5vmin;
        float:left;
  }
  .key12{
        color: white;
        font-weight: bold;
        padding-top: 0.5%;
        width:20%;
        height: 35%;
        text-align:center;
        font-size: 2.5vmin;
        float:left;
    
  }

  .key13{
        color: white;
        font-weight: bold;
        padding-top: 0.5%;
        width:20%;
        height: 35%;
        text-align:center;
        font-size: 2.5vmin;
        float:left;
    
  }
  .key14{
        color: white;
        font-weight: bold;
        padding-top: 0.5%;
        width:20%;
        height: 35%;
        text-align:center;
        font-size: 2.5vmin;
        float:left;
    
  }
  .key15{
    color: white;
    font-weight: bold;
    padding-top: 0.5%;
    width:20%;
    height: 35%;
    text-align:center;
    font-size: 2.5vmin;
    float:left;
  
  }
  
  .key21{
    color: rgb(192, 32, 32);
    /* padding: 0px; */
    
    width:20%;
    height: 45%;
    text-align:center;
    font-size: 4.5vmin;
    font-weight: bold;
    float:left;
  }
  .key22{
    color: rgb(26, 23, 29);
    width:20%;
    height: 45%;
    text-align:center;
    font-size: 4.5vmin;
    font-weight: bold;
    float:left;
  }
  .key23{
    color: rgb(55, 118, 177);
    width:20%;
    height: 45%;
    text-align:center;
    font-size: 4.5vmin;
    font-weight: bold;
    float:left;
  }
  .key24{
    color: rgb(211, 116, 27);
    width:20%;
    height: 45%;
    text-align:center;
    font-size: 4.5vmin;
    font-weight: bold;
    float:left;
  }
  .key25{
    color: rgb(64, 143, 90);
    width:20%;
    height: 45%;
    text-align:center;
    font-size: 4.5vmin;
    font-weight: bold;
    float:left;
  }
  .key31{
    color: rgb(75, 75, 75);
    width:20%;
    height: 20%;
    /* padding-top: 0px; */
    text-align:center;
    font-size: 1.5vmin;
    float:left;
  }
  .key32{
    color: rgb(75, 75, 75);
    width:20%;
    height: 15%;
    text-align:center;
    font-size: 1.5vmin;
    float:left;
  }
  .key33{
    color: rgb(75, 75, 75);
    width:20%;
    height: 15%;
    text-align:center;
    font-size: 1.5vmin;
    float:left;
  }
  .key34{
    color: rgb(75, 75, 75);
    width:20%;
    height: 15%;
    text-align:center;
    font-size: 1.5vmin;
    float:left;
  }
  .key35{
    color: rgb(75, 75, 75);
    width:20%;
    height: 15%;
    text-align:center;
    font-size: 1.5vmin;
    float:left;
  }
  #center2{
    position:absolute;
    width: 52%;
    height: 71%;
    top:29%;
    left: 24%;
    background: #d4016b;
  }
  #left1{
    position:absolute;
    width: 24%;
    height: 32%;
    top:4%;
    left: 0;
    background: #df9696;
  }
  #left2{
    position:absolute;
    width: 24%;
    height: 32%;
    top:36%;
    left: 0;
    background: #dfc59d;
  }
  #left3{
    position:absolute;
    width: 24%;
    height: 32%;
    top:68%;
    left: 0;
    background: #e7bf86;
  }
  
  
  #left0{
    position:absolute;
    width: 24%;
    height: 2%;
    top:2%;
    left: 0;
    font-size: 1.5vmin;
    background: #bfacee;
    text-align: left;
  }
  /* .hotwords{
    font-weight: bolder;
    font-size: 3vmin;
    color: rgb(0, 0, 0);
  } */
  .out {
    overflow:hidden;
    height:100%;
    font-size: 2.5vmin;
    text-align: center;
    /* margin-top:50px;
    padding-left:20px; */
  }
  #right1{
    position:absolute;
    width: 24%;
    height: 32%;
    top:4%;
    right: 0;
    background: #99b7c4;
  }
  #right2{
    position:absolute;
    width: 24%;
    height: 32%;
    top:36%;
    right: 0;
    background: #92c092;
  }
  #right3{
    position:absolute;
    width: 24%;
    height: 32%;
    top:68%;
    right: 0;
    background: #82b8c5;
  }
  #left4{
    position:absolute;
    width: 24%;
    height: 2%;
    top: 0;
    left: 0;
    background: #ebe39a;
    font-size: 1.5vmin;
    text-align: left;
    
  }
  #sel{
      position:absolute;
      width: 6%;
      height: 6%;
      top: 68%;
      left: 18%;
      text-align: right;
      background-color: lightcoral;
  }

  .dowebok { 
    width: 100%; 
    height: 100%; 
    font-size: 2.5vmin;
    text-align: center;  
  }
  .dowebok ul { 
    margin: 0; 
    line-height: 150%;
    list-style-type: none;
  }
  .dowebok a { 
    color: #333; 
    text-decoration: none;
  }
  .dowebok a:hover { 
    text-decoration: underline;
    color: rgb(4, 204, 137);
    font-size: 2.8vmin;
  }


  .str_wrap {
    overflow:hidden;
    /* //zoom:1; */
    width:100%;
    /* font-size:2.8vmin; */
    /* width: 52%; */
    /* height: 100%; */
    /* top:12%; */
    /* left: 24%; */
    line-height:16px;
    position:relative;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;  
    background:#a17b7b;
    white-space:nowrap;
  }
  
  .str_wrap.str_active {
    background:#ffc9c9;
  }
  .str_move { 
    white-space:nowrap;
    position:absolute; 
    top:0; 
    left:0;
    cursor:move;
  }
  .str_move_clone {
    display:inline-block;
    /* //display:inline;
    //zoom:1; */
    vertical-align:top;
    position:absolute; 
    left:100%;
    top:0;
  }
  .str_vertical .str_move_clone {
    left:0;
    top:100%;
  }
  .str_down .str_move_clone {
    left:0;
    bottom:100%;
  }
  .str_vertical .str_move,
  .str_down .str_move {
    white-space:normal;
    width:100%;
  }
  .str_static .str_move,
  .no_drag .str_move,
  .noStop .str_move{
    cursor:inherit;
  }
  .str_wrap img {
    max-width:none !important;	
  }